<template>
	<gracePage headerBG="#FFFFFF" :customHeader="false" :isLoading="pageLoading">
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<view style="padding:20rpx 25rpx;" id="nav">
				<graceNavBar :items="tabs" :currentIndex="swiperCurrentIndex" @change="navChange"></graceNavBar>
			</view>
			<swiper style="min-height: calc(100vh - 150rpx);" :current="swiperCurrentIndex" @change="swiperChange">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: calc(100vh - 150rpx); padding-bottom: 20rpx;"
						@scrolltolower="scrollend">
						<view class="grace-order grace-box-shadow" v-for="(order, orderIndex) in orders[index]"
							:key="orderIndex">
							<view class="grace-space-between grace-flex-center">
								<text class="grace-order-number">订单号 : {{order.orderNumber}}</text>
								<view class="grace-icons icon-close"><text class="grace-text" style="margin-left:10rpx;"
										@tap="removeorder(order.orderNumber)">删除订单</text></view>
							</view>
							<!-- 以商铺为单位进行循环 -->
							<block v-for="(shop, indexShop) in order.items" :key="indexShop">
								<view class="grace-title">
									<text class="grace-black">{{shop.shopName}}</text>
								</view>
								<!-- 循环订单商品 -->
								<view class="grace-order-goods" v-for="(goods, indexGoods) in shop.goods"
									:key="indexGoods">
									<image :src="goods.goods_img" class="grace-order-goods-img" mode="widthFix"></image>
									<text class="grace-order-goods-name">{{goods.goods_name}}</text>
									<view class="grace-order-goods-price">￥{{goods.goods_price}}<text
											class="grace-order-goods-num"> x {{goods.goods_buynum}}</text></view>
								</view>
							</block>
							<!-- 订单底部 -->
							<view class="grace-order-footer grace-nowrap">
								<text class="grace-order-number">{{order.status}} {{order.orderDate}}</text>
								<text class="grace-order-btn">查看发票</text>
								<text class="grace-order-btn grace-order-btn-red">再次购买</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../../graceUI/components/gracePage.vue";
	import graceEmpty from "../../../graceUI/components/graceEmptyNew.vue";
	import graceNavBar from "../../../graceUI/components/graceNavBar.vue";

	export default {
		data() {
			return {
				swiperCurrentIndex: 0,
				tabs: ['全部', '待付款', '待收货', '已完成', '已取消'],
				mainHeight: 0,
				// 订单数据  订单数组和订单状态数组元素一致
				orders: [
					[{
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}, {
						orderNumber: '123',
						items: [{
							shopName: '小冷科技',
							goods: [{
								goods_name: '羽绒服',
								goods_price: 180,
							}]
						}]
					}],
					[],
					[],
					[],
					[]
				],
				// 订单页码
				pages: [1, 1, 1, 1, 1],
				// 加载状态
				loadingTypes: [3, 3, 3, 3, 3],
				pageLoading: false
			}
		},
		onReady: function() {

		},
		onLoad: function() {
			this.getOrders();
		},

		methods: {
			navChange: function(e) {
				this.swiperCurrentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.swiperCurrentIndex = index;
			},
			scrollend: function(e) {
				console.log(e);
				// 避免重复加载
				if (this.loadingTypes[this.swiperCurrentIndex] != 3) {
					return;
				}
				this.getOrders();
			},
			getOrders: function() {


			},
			removeorder: function(oid) {
				console.log(oid);
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除订单 [ ' + oid + ' ] 吗？',
					success: function(e) {
						if (e.confirm) {
							//自行完善删除代码
						}
					}
				});
			}
		},
		components: {
			gracePage,
			graceNavBar,
			graceEmpty
		}
	}
</script>
<style>
	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #F6F7F8;
		margin-top: 30rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-order {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 0 25rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		width: 660rpx;
	}

	.grace-shop {
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.grace-order-goods {
		font-size: 0;
		overflow: hidden;
		width: 660rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.grace-order-goods-img {
		width: 100rpx;
		height: 100rpx;
	}

	.grace-order-goods-name {
		line-height: 40rpx;
		width: 100rpx;
		flex: auto;
		overflow: hidden;
		font-size: 26rpx;
		margin: 0 20rpx;
		color: #333333;
	}

	.grace-order-goods-price {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #333333;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.grace-order-goods-num {
		font-size: 22rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.icon-close {
		font-size: 28rpx;
		color: #999999;
		margin-left: 30rpx;
	}

	.grace-order-footer {
		margin-top: 2px;
	}

	.grace-order-number {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
	}

	.grace-order-status {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
		text-align: center;
	}

	.grace-order-btn {
		display: block;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999999;
		font-size: 22rpx;
		text-align: center;
		border-radius: 60rpx;
		border: 1px solid #999999;
		margin-left: 20rpx;
	}

	.grace-order-btn-red {
		border-color: #FF0036;
		color: #FF0036;
	}
</style>